<script setup>
import { ref } from 'vue'
import { getBookListService } from '@/api/book.js'
import { ElInput } from 'element-plus'
import payment from './components/orderPayment.vue'
import { imageUrlToFileObject } from '@/api/avatar'
import { useRouter } from 'vue-router'
const router = useRouter()
const bookList = ref([])
const loading = ref(false)
const dialog = ref()
const queryinf = ref('')
const isQuery = ref(false)

const getBookList = async () => {
  isQuery.value = true
  loading.value = true
  const res = await getBookListService(queryinf.value)
  bookList.value = res.data.data
  for (let item of bookList.value) {
    imageUrlToFileObject(item.imgUrl)
      .then((blobURL) => {
        item.imgUrl = blobURL
      })
      .catch((error) => {
        console.error('Error occurred:', error)
      })
  }
  loading.value = false
}

const openPayment = (item) => {
  dialog.value.open(item)
}

const onSuccess = async () => {
  ElMessage.success('借阅成功')
  router.push('/borrower/myBorrwer')
}
</script>

<template>
  <page-container title="图书借阅">
    <template #extra>
      <ElInput v-model="queryinf" clearable style="width: 200px"></ElInput>
      <el-button @click="getBookList">查询图书</el-button>
    </template>
    <div class="home">
      <div class="goods-list">
        <div class="goods-item" v-for="item in bookList" :key="item.id">
          <div>
            <img
              class="goods-img"
              v-if="item.imgUrl[0] === 'b'"
              :src="item.imgUrl"
            />
          </div>
          <div class="goods-add">
            <el-text class="book-name">书籍名称：{{ item.bookName }}</el-text
            ><br />
            <el-text>作者：{{ item.author }} </el-text><br />
            <el-text class="goods-price">押金:￥{{ item.deposit }} 元</el-text
            ><br />
            <template v-if="item.num > 0">
              <el-button @click="openPayment(item)">借书</el-button>
            </template>
            <template v-else>
              <el-text>没有库存</el-text>
            </template>
          </div>
        </div>
      </div>

      <TabBar name="home" />
    </div>
    <template #empty>
      <el-empty description="没有数据" v-if="isQuery === true"></el-empty>
      <el-empty
        description="请输入书籍名称或者书籍作者的关键字查询书籍"
        v-if="isQuery === false"
      ></el-empty>
    </template>
    <payment ref="dialog" @success="onSuccess"></payment>
  </page-container>
</template>

<style lang="scss" scoped>
.home {
  padding-bottom: 60px;
}
.goods-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background-color: #f0f0f0;
}
.goods-item {
  height: 250px;
  width: 176px;
  margin-bottom: 7px;
  padding: 4px 10px;
  background-color: #fff;
  text-align: center;
}
.goods-img {
  width: 150px;
  height: 150px;
  vertical-align: middle;
  border: solid 1px #e0e0e0;
  border-radius: 6px;
}
.goods-add {
  align-items: center;
}
.goods-price {
  font-size: 16px;
  font-weight: bold;
  color: orangered;
}
</style>
